<template>
  <div>
    <h1>easyTable</h1>
    <v-table
      is-vertical-resize
      is-horizontal-resize
      style="width:100%"
      :columns="columns"
      :min-height="200"
      :table-data="tableData"
      row-hover-color="#eee"
      row-click-color="#edf7ff"
      @on-custom-comp="customCompFunc"
    />
    <tableOperation />
  </div>
</template>

<script>
import tableOperation from './tableOperation.vue'

export default{
  components: {
    tableOperation
  },
  data() {
    return {
      tableData: [
        {'name': '赵伟','tel': '156*****1987','hobby': '钢琴、书法、唱歌','address': '上海市黄浦区金陵东路569号17楼'},
        {'name': '李伟','tel': '182*****1538','hobby': '钢琴、书法、唱歌','address': '上海市奉贤区南桥镇立新路12号2楼'},
        {'name': '孙伟','tel': '161*****0097','hobby': '钢琴、书法、唱歌','address': '上海市崇明县城桥镇八一路739号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '周伟','tel': '197*****1123','hobby': '钢琴、书法、唱歌','address': '上海市青浦区青浦镇章浜路24号'},
        {'name': '吴伟','tel': '183*****6678','hobby': '钢琴、书法、唱歌','address': '上海市松江区乐都西路867-871号'}
      ],
      columns: [
        {
          field: 'custome', title: '序号', width: 50, titleAlign: 'center', columnAlign: 'center',
          formatter: function (rowData,rowIndex,pagingIndex,field) {
            return rowIndex < 3 ? '<span style="color:red;font-weight: bold;">' + (rowIndex + 1) + '</span>' : rowIndex + 1
          }, isFrozen: true,isResize: true
        },
        {field: 'name', title: '姓名', width: 80, titleAlign: 'center',columnAlign: 'center',isResize: true},
        {field: 'tel', title: '手机号码', width: 150, titleAlign: 'center',columnAlign: 'center',isResize: true},
        {field: 'hobby', title: '爱好', width: 150, titleAlign: 'center',columnAlign: 'center',isResize: true},
        {field: 'address', title: '地址', width: 230, titleAlign: 'center',columnAlign: 'left',isResize: true},
        {field: 'custome-adv', title: '操作',width: 200, titleAlign: 'center',columnAlign: 'center',componentName: 'table-operation',isResize: true}
      ]

    }
  },
  created(){
    console.log(tableOperation)
  },
  methods: {
    customCompFunc(params){
      console.log(params)
      if (params.type === 'delete'){ // do delete operation
        this.$delete(this.tableData,params.index)
      }else if (params.type === 'edit'){ // do edit operation
        alert(`行号：${params.index} 姓名：${params.rowData['name']}`)
      }
    }
  }
}
</script>

<style>

</style>